import React from 'react';
import { BrowserRouter, Switch, Route, Redirect, Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { Layout, NavMenu } from 'tea-component';

import { HomeAll } from './routes/index/index';
import { Home } from './routes/home';
import { BlockList } from './routes/block-list';
import { TransactionList } from './routes/transaction-list';
import { BlockDetail } from './routes/block-detail';
import { TransactionDetail } from './routes/transaction-detail';
import { BlockChainList } from './routes/blockchain-list';
import { store } from './model/index';
import logo from '@src/assets/img/logo.jpg';

import 'tea-component/lib/tea.css';
import './app.scss';

const { Header, Body } = Layout;
const history = createBrowserHistory();

const ROUTES = [
  {
    path: '/blockchainlist',
    exact: true,
    component: BlockChainList,
  },
  {
    path: '/home',
    exact: true,
    component: Home,
  },
  {
    path: '/blocklist',
    exact: true,
    component: BlockList,
  },
  {
    path: '/tslist',
    exact: true,
    component: TransactionList,
  },
  {
    path: '/blockdetail',
    exact: true,
    component: BlockDetail,
  },
  {
    path: '/tsdetail',
    exact: true,
    component: TransactionDetail,
  },
  {
    path: '/',
    exact: true,
    component: HomeAll,
  },
];

const ROUTER = (
  <BrowserRouter>
    <Switch>
      {ROUTES.map((items, index) => {
        return (
          <Route
            path={items.path}
            render={(props) => {
              return <items.component {...props} />;
            }}
            key={index}
          />
        );
      })}
      <Redirect from="" to="/" />
    </Switch>
  </BrowserRouter>
);

function App() {
  return (
    <Router history={history}>
      <Provider store={store}>
        <Layout>
          <Header>
            <NavMenu
              left={
                <NavMenu.Item onClick={() => history.push('/')}>
                  <img src={logo} alt="logo" style={{ width: '243px' }} />
                </NavMenu.Item>
              }
              style={{ backgroundColor: '#0E3165' }}
            />
          </Header>
          <Body>{ROUTER}</Body>
        </Layout>
      </Provider>
    </Router>
  );
}

export default App;
